@charset 'uft-8';

.reset(){
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	    margin: 0 auto;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
	    font: inherit;
	    vertical-align: baseline;
	}
	article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    *{
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
	}
    body {
    	line-height: 100%;
	    text-size-adjust:none;
		-webkit-text-size-adjust:none;
		-moz-text-size-adjust:none;
		-ms-text-size-adjust:none;
		-o-text-size-adjust:none;
    }
    ol, ul {
        list-style: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    img {
        border:0;
    }
}

// 初始化参数
.reset();

// 过渡效果
.transition(@s:0.4s,@eas:ease-in-out,@dd:0s){
	-webkit-transition:all @s @eas @dd;
	-moz-transition:all @s @eas @dd;
	-ms-transition:all @s @eas @dd;
	-o-transition:all @s @eas @dd;
	transition:all @s @eas @dd;

	//曲线定义方法
	//transition-timing-function:cubic-bezier(0.82, 0.01, 0.77, 0.78);
}

// 3D转换
// 单独引用
.scale3D(@bs:1){
	-webkit-transform:scale3D(@bs,@bs,1);
	-moz-transform:scale3D(@bs,@bs,1);
	-ms-transform:scale3D(@bs,@bs,1);
	-o-transform:scale3D(@bs,@bs,1);
	transform:scale3D(@bs,@bs,1);
}
.translate3D(@x,@y,@z){
	-webkit-transform:translate3D(@x,@y,@z);
	-moz-transform:translate3D(@x,@y,@z);
	-ms-transform:translate3D(@x,@y,@z);
	-o-transform:translate3D(@x,@y,@z);
	transform:translate3D(@x,@y,@z);
}
.rotate3D(@x,@y,@z,@ds){
	-webkit-transform:rotate3D(@x,@y,@z,@ds);
	-moz-transform:rotate3D(@x,@y,@z,@ds);
	-ms-transform:rotate3D(@x,@y,@z,@ds);
	-o-transform:rotate3D(@x,@y,@z,@ds);
	transform:rotate3D(@x,@y,@z,@ds);
}

// 旋转定位
.transform-origin(@x:50%,@y:50%){
	-webkit-transform-origin:@x @y;
	-moz-transform-origin:@x @y;
	-ms-transform-origin:@x @y;
	-o-transform-origin:@x @y;
	transform-origin:@x @y;
}

// 3D透视效果-放在父元素中
.perspective(@loc:500){
	perspective: @loc;
	-webkit-perspective: @loc;
}
.perspective-origin(@x:50%,@y:50%){
	perspective-origin:@x,@y;
	-webkit-perspective-origin:@x,@y;
}

// 动画效果
.animation(@name,@time:4s,@ease:ease-in-out,@del:0s,@df:1,@nor:normal,@ba:backwards){
	animation-name:@name;
	animation-duration:@time;
	animation-timing-function:@ease;
	animation-delay:@del;
	animation-iteration-count: @df; // infinite
	animation-direction: @nor; // alternate
	animation-fill-mode: @ba; // forwards
	-webkit-animation-name:@name;
	-webkit-animation-duration:@time;
	-webkit-animation-timing-function:@ease;
	-webkit-animation-delay:@del;
	-webkit-animation-iteration-count: @df; 
	-webkit-animation-direction: @nor;
	-webkit-animation-fill-mode: @ba;
}
// 暂停动画
.stopanimation{
	animation-play-state:paused; // running
	-webkit-animation-play-state:paused; 
}
// 开始动画
.running{
	animation-play-state:running; // paused
	-webkit-animation-play-state:running; 
}

// 模糊效果 动画慎用
.blur(@blur:10px){	
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */   
    -webkit-filter: blur(@blur); /* Chrome, Opera */
       -moz-filter: blur(@blur);
        -ms-filter: blur(@blur);    
            filter: blur(@blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
// 对比度滤镜
.contrast(@con:2){
    /**  格式，filer: contrast(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果
     */
     -webkit-filter: contrast(@con);
     -moz-filter: contrast(@con);
     -o-filter: contrast(@con);
     -ms-filter: contrast(@con);
     filter: contrast(@con); 
}
// 曝光滤镜 
.brightness(@s:2){
    /**  格式，filer: brightness(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果
     */
     -webkit-filter: brightness(@s);
     -moz-filter: brightness(@s);
     -o-filter: brightness(@s);
     -ms-filter: brightness(@s);
     filter: brightness(@s); 
}
// 灰度滤镜
.grayscale(@g:100%){
	/**  格式，filer: grayscale(效果范围)
	 *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
	 */
	 -webkit-filter: grayscale(@g);
	 -o-filter: grayscale(@g);
	 -moz-filter: grayscale(@g);
	 -ms-filter: grayscale(@g);
	 filter: grayscale(@g);  
}

// 盒子居中
.box-center{
	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;
	/* Safari、Opera 以及 Chrome */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	/* W3C */
	display:box;
	box-pack:center;
	box-align:center;
}


// 主页面
.wh{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}
body{
	.wh;
	overflow: hidden;
	font-family: "微软雅黑";
}
.content{
	.wh;
	.box-center;
	background: #000;
	z-index: 1;

	> a{
	font-size: 30px;
	text-decoration: none;
	color: #fff;
	.transition(0.2s);
	}
}
.start-effect{
	letter-spacing: 30px;
	opacity:0;
}
// OP页面
.page-1{
	.wh;
	.box-center;
	.transition(0.4s,ease-in-out,0s);
	background:rgba(68,97,157,1);
	overflow: hidden;
	z-index: 9;
}
.page-1-effect{
	border-radius: 50%;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
}

.tittop{
	font-size: 32px;
	line-height: 120%;
	color: #fff;

	img{
		position: relative;
		top: 10px;
		margin-left: 5px;
	}
}
.titbod{
	width: 124px;
	padding: 4px 0;
	margin-top: 12px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	border:1px solid #fff;
	letter-spacing: 3px;
	text-shadow:2px 2px 3px #365491;
}
.titbod-effect{
	.animation(titbod-effect,1.8s,ease-in-out,0.3s);
	.transform-origin(center,top);
}
.tmap{
	.perspective(800);
	.perspective-origin(50%,0);
	.transition();
}
.tmap-effect{
	.animation(tmap-effect,0.8s,ease-in-out,0.2s);
}
.tmap-effect-out{
	.animation(tmap-effect-out,0.4s,@ba:forwards);
}

// 搜索
.search{
	visibility: hidden;
	height: 30px;
	width: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -100px;
	.translate3D(0,0,0);
	.transition(0.4s,ease);

	input{
		border-radius: 6px;
		border: none;
		height: 30px;
		width: 200px;
		outline: 0px;
		padding: 0 16px;
		color: #7E7E7E;
		background: url(../img/magnifier.svg) 170px center no-repeat;
		background-size: 20px 20px;
		background-color: #fff;
	}
}
.hand{
	width: 30px;
	height: 30px;
	position: absolute;
	top: 12px;
	right: 4px;
	display: none;
	z-index: 90;
}
.hand-loc{
	display: block;
	.animation(hand-loc,1.8s,ease-in);
}

.search-in{
	.animation(search-in,1.4s);
}
.search-loc{
	.translate3D(0,14px,0);
}
.search-input{
	.animation(search-input,.2s,ease,1.8s);
}

.fanpai{
	color: #fff;
	text-align: center;
	width: 236px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -118px;
	margin-top: -100px;
	.translate3D(0,0,0);
	.transition(0.3s,ease,1.4s);
	.perspective();
	.perspective-origin(50%,0);

	h1{
		padding-bottom: 5px;
		font-size: 30px;
		line-height: 100%;
	}
	p{
		margin: 4px 0;
		color: #879dcc;
	}
}
.fanpai-in{
	.translate3D(0,-800px,0);
}
.fanpai-rota{
	.animation(titbod-effect,1.8s,ease,1.5s);
	.transform-origin(center,top);
}

// page-2
.page-2{
	.wh;
	.box-center;
	.transition(.3s,@dd:0s);
	.scale3D(1);
	z-index: 20;
	visibility: hidden;
}
.page-2-effect{
	.scale3D(.8);
}
.timealy{
	width: 128px;
	position: absolute;
	text-align: center;
	bottom: 60px;
	left: 50%;
	margin-left: -64px;
	.transition(.3s);
	h2{
		font-size: 26px;
		line-height: 140%;
		color: rgba(68,97,157,1);
	}
}
.timealy-loc{
	.animation(timealy-loc,5s,linear,@df:infinite);
}
.ptago{
	line-height: 140%;
	color: rgba(154,154,154,1);
}
.past{
	width:90px;
	height:0px;
	background: rgba(186,196,200,1);
	text-align: center;
	line-height: 28px;
	color:#fff;
	font-size: 14px;
	position:absolute;
	bottom:130px;
	left:50%;
	margin-left: -45px;
	border-radius: 5px;
	z-index: 2;
	overflow:hidden;
	.transition(.3s,ease,.5s);
}
.past-hi{
	height:28px;
}
.poinline{
	width: 3px;
	height: 0;
	background: rgba(218,220,216,1);
	position: relative;
	bottom:20px; 
}
.poinline-hight{
	.animation(poinline-hight,5s,linear,@ba:forwards);
}
.poinline:after{
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 11px;		
	background: rgba(154,154,154,1);
	position: absolute;
	bottom: -11px;
	left: -4px;
}
.mask{
	width:100%;
	background:#fff;
	height:40px;
	position:absolute;
	bottom:45px;
	left:0;
	z-index: 1;
}
// page-3
.page-3{
	.wh;
	.box-center;
	z-index: 30;
	overflow: hidden;
	visibility: hidden;
}
.camera{
	.wh;
	z-index: 31;
	.animation(timealy-loc,5s,linear,@df:infinite);
}
.photobox{
	.wh;
}
.photo{
	overflow:hidden;
	width:98%;
	margin-left: 1%;
	height:86%;
	position:absolute;
	top:7%;
	background:#fff;
	padding:10px;
	box-shadow: 3px 3px 5px rgba(0,0,0,.5);
	border: 1px solid #a3a3a3;
	border-radius: 5px;
	visibility:hidden;

	.photo-box{
		width:~'calc(100% - 20px)';
		height:100%;
		overflow: hidden;
		background:#000;
		.box-center;
	}
}
.photo-mask{
	position:absolute;
	width:100%;
	height:30px;
	background:#fff;
	bottom:0;

	span{
		font-size: 12px;
		float: right;
		line-height: 30px;
		color: rgba(122,122,122,1);
		margin-right: 26px;
	}
}
.headmov{
	margin:10px 0; 
	dt{
		display:inline-block;
	}
	dd{
		display:inline-block;
		margin: 0 0 0 10px;
		h3{
			color: rgba(93,109,162,1);
		}
		p{
			font-size: 12px;
			color: rgba(122,122,122,1);
		}
	}
}
// 背景图片
.back{
	.wh;
	background: url(../img/backgrund.jpg) no-repeat center center;
	background-size: 100% 100%;
	z-index: -1;
	.animation(flash,4s,linear,0s,infinite);
}
.light{
	.wh;
	background: url(../img/lin2.png) no-repeat center center;
	background-size: 100% auto;
	.animation(light,8s,linear,0s,infinite);
	.transform-origin(right,top);
	z-index: 999;
	img{
		width:100%;
		.animation(light-in,7s,linear,0s,infinite);
		.transform-origin(right,top);
	}
}


// 照片墙
.page-4{
	.wh;
	.box-center;
	z-index: 30;
	visibility:hidden;
}
.page-4-effect{
	visibility:visible;
	.animation(page-4-effect,.6s,ease-in,@ba:forwards);
	.card{
		display:block;
	}
}
.page-4-effect-out{
	visibility:visible;
	.animation(page-4-effect-out,.6s,ease-in,@ba:forwards);
	.card{
		display:block;
	}
}
.card{
	.perspective(600);
	width:1024px;
	height:1024px;
	-webkit-transform:scale3D(.5,.5,1);
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -512px;
	margin-left: -512px;
	display:none;

	li{
		width:33.3333%;
		height:33.3333%;
		float:left;
		overflow:hidden;
		text-align: center;
	}
	img{
		width:100%;
		height:100%;
	}
}
.rotcard{
	.animation(rotcard,.8s,ease,1s);
}
// 结束页面
.mvend{
	.wh;
	background:rgba(68,97,157,1);
	z-index: 80;
	visibility:hidden;
	text-align: center;
	padding-top: 40%;

	h2{
		color:#fff;
	}
}
.mvendpak{
	visibility:visible;
	.animation(mvendpak,.6s,ease);
}
.endbtn{
	margin-top: 30px;
	a{
		display:block;
		width:140px;
		height:30px;
		line-height: 27px;
		border-radius: 30px;
		border: 2px solid #fff;
		color: #fff;
		text-decoration: none;
		margin-bottom: 14px;
		font-size: 12px;
	}
}


// 照片动画
.btline{
	width: 3px;
	height: 60%;
	background: rgba(218,220,216,1);
	position: absolute;
	bottom: -28%;
	.transition(.2s);
}
.bthit{
	.animation(poinline-hight,6s,linear,@df:infinite);
}
.photo-effect-1{
	visibility:visible;
	// .stopanimation;
	.animation(photo-1,1s,ease-in);
}
.photo-effect-1-out{
	.animation(photo-1-out,2.2s,ease,@ba:forwards);
}
.photo-effect-2{
	visibility:visible;
	.animation(photo-2,1.4s,ease-in,@ba:forwards);
}
.photo-effect-2-out{
	.animation(photo-2-out,2s,ease-in,@ba:forwards);
}
.photo-effect-3{
	visibility:visible;
	.animation(photo-3,.8s,ease,@ba:forwards);
}
.photo-effect-3-out{
	.animation(photo-3-out,1s,ease-in,@ba:forwards);
}
.photo-effect-4{
	visibility:visible;
	.animation(photo-4,.8s,ease,@ba:forwards);
}
.photo-effect-4-out{
	.animation(photo-4-out,1s,ease-in,@ba:forwards);
}
.photo-effect-5{
	visibility:visible;
	.animation(photo-5,.8s,ease,@ba:forwards);
}
.backac{
	.animation(backac,4s,linear,@ba:forwards);
	.blur(10px);
}
.photo-effect-5-out{
	.animation(photo-5-out,3.3s,ease-in,@ba:forwards);
}
.photo-effect-6{
	visibility:visible;
	.animation(photo-6,.8s,ease,@ba:forwards);
}
.photo-effect-6-out{
	.animation(photo-6-out,3.3s,ease-in,@ba:forwards);
}
.backac-r{
	.animation(backac-r,4s,linear,@ba:forwards);
	.blur(10px);
}
.photo-effect-7{
	visibility:visible;
	.animation(photo-7,.8s,ease,@ba:forwards);
}
.photo-effect-7-out{
	.animation(photo-7-out,3.3s,ease-in,@ba:forwards);
}
.backac-tr{
	.animation(backac-tr,4s,linear,@ba:forwards);
	.blur(10px);
}
.backac-tr2{
	.animation(backac-tr2,4s,linear,@ba:forwards);
	.blur(10px);
}
.photo-effect-8{
	visibility:visible;
	-webkit-transform:translate3D(110%,0,0);
	.animation(photo-8,.8s,ease,.4s,@ba:forwards);
}
.backac-loc{
	.animation(backac-loc,.3s,ease,@ba:forwards);
	.blur(8px);
	div{
		visibility:visible;
	}
}
.photo-effect-8-out{
	.animation(photo-8-out,3.3s,ease-in,@ba:forwards);
}

// 动画集合
@-webkit-keyframes tmap-effect{
	0%{-webkit-transform:scale3D(0.1,0.1,1);}
	50%{-webkit-transform:scale3D(1,1,1);}
	65%{-webkit-transform:scale3D(0.7,0.7,1);}
	80%{-webkit-transform:scale3D(1,1,1);}
	90%{-webkit-transform:scale3D(0.9,0.9,1);}
	100%{-webkit-transform:scale3D(1,1,1);}
}
@-webkit-keyframes titbod-effect{
	0%{-webkit-transform:rotate3D(1,0,0,80deg);}
	14.3%{-webkit-transform:rotate3D(1,0,0,-60deg);}
	28.6%{-webkit-transform:rotate3D(1,0,0,50deg);}
	42.9%{-webkit-transform:rotate3D(1,0,0,-40deg);}
	57.2%{-webkit-transform:rotate3D(1,0,0,30deg);}
	71.5%{-webkit-transform:rotate3D(1,0,0,-20deg);}
	85.8%{-webkit-transform:rotate3D(1,0,0,10deg);}
	92.5%{-webkit-transform:rotate3D(1,0,0,-5deg);}
	100%{-webkit-transform:rotate3D(1,0,0,0deg);}
}
@-webkit-keyframes tmap-effect-out{
	0%{.scale3D(1);}
	30%{.scale3D(1.4);}
	100%{.scale3D(0.1); opacity: 0;}
}
@-webkit-keyframes search-in{
	0%{-webkit-transform:translate3D(0,800px,0);}
	55%{-webkit-transform:translate3D(0,-30px,0);}
	65%{-webkit-transform:translate3D(0,20px,0);}
	75%{-webkit-transform:translate3D(0,-20px,0);}
	85%{-webkit-transform:translate3D(0,10px,0);}
	95%{-webkit-transform:translate3D(0,-5px,0);}
	100%{-webkit-transform:translate3D(0,0,0);}
}
@-webkit-keyframes hand-loc{
	0%{-webkit-transform:translate3D(700px,700px,0);}
	90%{-webkit-transform:translate3D(0,0,0);}
	95%{-webkit-transform:translate3D(0,0,0);}
	97%{-webkit-transform:translate3D(0,6px,0);}
	100%{-webkit-transform:translate3D(0,0,0);}
}
@-webkit-keyframes search-input{
	0%{ -webkit-transform:scale3D(1,1,1);}
	40%{-webkit-transform:scale3D(1.1,1.1,1);}
	100%{-webkit-transform:scale3D(1,1,1);}
}
@-webkit-keyframes timealy-loc{
	0%{-webkit-transform:translate3D(0,0,0);}
	20%{-webkit-transform:translate3D(10px,20px,0);}
	40%{-webkit-transform:translate3D(-10px,0px,0);}
	60%{-webkit-transform:translate3D(5px,-15px,0);}
	80%{-webkit-transform:translate3D(-2px,-30px,0);}
	100%{-webkit-transform:translate3D(0,0,0);}
}
@-webkit-keyframes poinline-hight{
	0%{height: 0px;}
	100%{height: 1000px;}
}
@-webkit-keyframes photo-1{
	0%{-webkit-transform:translate3D(110%,-80%,0); }
	30%{.brightness(1.6);}
	40%{-webkit-transform:translate3D(-10px,10px,0);}
	50%{-webkit-transform:translate3D(0,0,0);}
	100%{-webkit-transform:translate3D(0,0,0); .brightness(1);}
}
@-webkit-keyframes photo-1-out{
	0%{-webkit-transform:translate3D(0,0,0) scale3D(1,1,1);}
	50%{-webkit-transform:translate3D(0,0,0) scale3D(0.7,0.7,1);}
	75%{-webkit-transform:translate3D(5px,3px,0) scale3D(0.8,0.8,1);opacity:1;}
	100%{-webkit-transform:translate3D(600px,-200px,0);opacity:0;}
}
@-webkit-keyframes photo-2{
	0%{-webkit-transform:translate3D(-110%,-80%,0) scale3D(0.5,0.5,1);}
	10%{.brightness(1.6);}
	20%{-webkit-transform:translate3D(10px,10px,0) scale3D(0.6,0.6,1);}
	60%{-webkit-transform:translate3D(0,0,0) scale3D(0.6,0.6,1);}
	70%{-webkit-transform:translate3D(0,0,0) scale3D(0.8,0.8,1);}
	80%{-webkit-transform:translate3D(0,0,0) scale3D(0.82,0.82,1); .brightness(1);}
	100%{-webkit-transform:translate3D(0,0,0) scale3D(0.8,0.8,1);}
}
@-webkit-keyframes photo-2-out{
	0%{-webkit-transform:translate3D(0,0,0) scale3D(1,1,1);}
	60%{-webkit-transform:translate3D(10px,10px,0) scale3D(1,1,1);}
	80%{-webkit-transform:translate3D(0,0,0) scale3D(0.9,0.9,1);}
	100%{-webkit-transform:translate3D(-110%,60%,0) scale3D(1.2,1.2,1);}
}
@-webkit-keyframes flash{
	0%{.brightness(1.2);}
	50%{.brightness(1);}
	.brightness(1.2);
}
@-webkit-keyframes photo-3{
	0%{-webkit-transform:translate3D(0,-110%,0);}
	10%{.brightness(2);}
	50%{-webkit-transform:translate3D(0,30%,0);}
	70%{-webkit-transform:translate3D(0,-15%,0);}
	80%{-webkit-transform:translate3D(0,7%,0);}
	100%{-webkit-transform:translate3D(0,0,0); .brightness(1);}
}
@-webkit-keyframes photo-3-out{
	0%{-webkit-transform:translate3D(0,0,0);}
	60%{-webkit-transform:translate3D(0,0,0);}
	80%{-webkit-transform:translate3D(0,-10%,0);}
	100%{-webkit-transform:translate3D(0,110%,0);}
}
@-webkit-keyframes photo-4{
	0%{-webkit-transform:translate3D(-110%,0,0);}
	10%{.brightness(2);}
	50%{-webkit-transform:translate3D(15%,0,0);}
	70%{-webkit-transform:translate3D(-5%,0,0);}
	80%{-webkit-transform:translate3D(0,0,0);}
	100%{-webkit-transform:translate3D(0,0,0); .brightness(1);}
}
@-webkit-keyframes photo-4-out{
	0%{-webkit-transform:translate3D(0,0,0);}
	60%{-webkit-transform:translate3D(0,0,0);}
	80%{-webkit-transform:translate3D(-10%,0,0);}
	100%{-webkit-transform:translate3D(110%,0,0);}
}
@-webkit-keyframes page-4-effect{
	0%{-webkit-transform:scale3D(2.5,2.5,1); opacity: 0;}
	50%{-webkit-transform:scale3D(2,2,1); opacity: 1;}
	70%{-webkit-transform:scale3D(1,1,1);}
	85%{-webkit-transform:scale3D(1.2,1.2,1);}
	100%{-webkit-transform:scale3D(1,1,1);}
}
@-webkit-keyframes page-4-effect-out{
	0%{-webkit-transform:scale3D(1,1,1); opacity: 1;}
	100%{-webkit-transform:scale3D(.4,.4,1); opacity: 0;}
}
@-webkit-keyframes photo-5{
	0%{-webkit-transform:translate3D(70%,0,0) scale3D(.8,.8,1);}
	10%{.brightness(2);}
	80%{-webkit-transform:translate3D(-7%,0,0) scale3D(.7,.7,1);}
	100%{-webkit-transform:translate3D(0,0,0) scale3D(.7,.7,1); .brightness(1);}
}
@-webkit-keyframes backac{
	0%{-webkit-transform:translate3D(-70%,0,0) scale3D(.5,.5,1);}
	90%{-webkit-transform:translate3D(-20%,0,0) scale3D(.5,.5,1);}
	100%{-webkit-transform:translate3D(110%,0,0) scale3D(.3,.3,1);}
}
@-webkit-keyframes photo-5-out{
	0%{-webkit-transform:translate3D(0,0,0) scale3D(1,1,1);}
	96%{-webkit-transform:translate3D(26%,0,0) scale3D(1.2,1.2,1);}
	100%{-webkit-transform:translate3D(-110%,70%,0) scale3D(1,1,1);}
}
@-webkit-keyframes photo-6{
	0%{-webkit-transform:translate3D(-70%,0,0) scale3D(.8,.8,1);}
	10%{.brightness(2);}
	80%{-webkit-transform:translate3D(7%,0,0) scale3D(.7,.7,1);}
	100%{-webkit-transform:translate3D(0,0,0) scale3D(.7,.7,1); .brightness(1);}
}
@-webkit-keyframes photo-6-out{
	0%{-webkit-transform:translate3D(0,0,0) scale3D(1,1,1);}
	96%{-webkit-transform:translate3D(-26%,0,0) scale3D(1.2,1.2,1);}
	100%{-webkit-transform:translate3D(110%,70%,0) scale3D(1,1,1);}
}
@-webkit-keyframes backac-r{
	0%{-webkit-transform:translate3D(70%,0,0) scale3D(.5,.5,1);}
	90%{-webkit-transform:translate3D(20%,0,0) scale3D(.5,.5,1);}
	100%{-webkit-transform:translate3D(-110%,0,0) scale3D(.3,.3,1);}
}
@-webkit-keyframes rotcard{
	0%{-webkit-transform: rotate3D(0,1,0,180deg) scale3D(1,1,1);}
	40%{-webkit-transform: rotate3D(0,1,0,180deg) scale3D(1.8,1.8,1);}
	80%{-webkit-transform: rotate3D(0,1,0,0deg) scale3D(1.4,1.4,1);}
	100%{-webkit-transform: rotate3D(0,1,0,0deg) scale3D(1,1,1);}
}
@-webkit-keyframes mvendpak{
	0%{-webkit-transform:translate3D(0,-90%,0);}
	80%{-webkit-transform:translate3D(0,10%,0);}
	100%{-webkit-transform:translate3D(0,0,0);}
}
@-webkit-keyframes light{
	0%{-webkit-transform: rotate3D(1,0,0,0deg) scale3D(1,1,1); opacity: 0.5;}
	50%{-webkit-transform: rotate3D(1,0,0,30deg) scale3D(1.6,1.6,1); opacity: 1;}
	100%{-webkit-transform: rotate3D(1,0,0,0deg) scale3D(1,1,1); opacity: 0.5;}
}
@-webkit-keyframes light-in{
	0%{-webkit-transform: rotate3D(1,0,0,0deg) scale3D(1.3,1.3,1); opacity: 1;}
	50%{-webkit-transform: rotate3D(1,0,0,30deg) scale3D(1,1,1); opacity: 0.6;}
	100%{-webkit-transform: rotate3D(1,0,0,0deg) scale3D(1.3,1.3,1); opacity: 1;}
}
@-webkit-keyframes photo-7{
	0%{-webkit-transform:translate3D(-70%,80%,0) scale3D(.8,.8,1);}
	10%{.brightness(2);}
	80%{-webkit-transform:translate3D(7%,-5%,0) scale3D(.7,.7,1);}
	100%{-webkit-transform:translate3D(0,0,0) scale3D(.7,.7,1); .brightness(1);}
}
@-webkit-keyframes photo-7-out{
	0%{-webkit-transform:translate3D(0,0,0) scale3D(1,1,1);}
	96%{-webkit-transform:translate3D(5%,0,0) scale3D(1.1,1.1,1);}
	100%{-webkit-transform:translate3D(110%,-70%,0) scale3D(1,1,1);}
}
@-webkit-keyframes backac-tr{
	0%{-webkit-transform:translate3D(-70%,70%,0) scale3D(.5,.5,1);}
	90%{-webkit-transform:translate3D(-20%,30%,0) scale3D(.5,.5,1);}
	100%{-webkit-transform:translate3D(-110%,-80%,0) scale3D(.3,.3,1);}
}
@-webkit-keyframes backac-tr2{
	0%{-webkit-transform:translate3D(70%,-70%,0) scale3D(.5,.5,1);}
	90%{-webkit-transform:translate3D(20%,-30%,0) scale3D(.5,.5,1);}
	100%{-webkit-transform:translate3D(110%,80%,0) scale3D(.3,.3,1);}
}
@-webkit-keyframes photo-8{
	0%{-webkit-transform:translate3D(110%,0,0);}
	10%{.brightness(2);}
	50%{-webkit-transform:translate3D(-15%,0,0);}
	70%{-webkit-transform:translate3D(5%,0,0);}
	80%{-webkit-transform:translate3D(0,0,0);}
	100%{-webkit-transform:translate3D(0,0,0); .brightness(1);}
}
@-webkit-keyframes backac-loc{
	0%{-webkit-transform:translate3D(110%,0,0) scale3D(.9,.9,1);}
	100%{-webkit-transform:translate3D(-110%,0,0) scale3D(.9,.9,1);}
}
@-webkit-keyframes photo-8-out{
	0%{-webkit-transform:translate3D(0,0,0) scale3D(1,1,1);}
	96%{-webkit-transform:translate3D(-5%,0,0) scale3D(.8,.8,1);}
	100%{-webkit-transform:translate3D(-110%,0,0) scale3D(1,1,1);}
}